<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录/注册</title>
    <link rel="stylesheet" href="../CSS/login.css">
    <link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
    <header class="header w">
        <div class="logo">
            <img src="../images/logo.png" width="120px" height="80px" alt="">
        </div>
        <div class="nav">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="./login.html">登录/注册</a></li>            
                <li><a href="./settlement.html">购物车</a></li>
                <li><a href="./shop.html">商城</a></li>
                <li><a href="./contact.html">联系客服</a></li>
                <li><a href="./service.html">售后</a></li>
            </ul>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="user singinBx">
                <div class="imgBx"><img src="../images/d1.jpg" alt=""></div>
                <div class="formBx">
                    <form id="loginForm">
                        <h2>登录</h2>
                        <input type="text" name="username" placeholder="用户名">
                        <input type="password" name="password" placeholder="密码">
                        <input type="submit" value="登录">
                        <p class="signup">没有账号？<a href="#" onclick="topggleForm();">注册</a></p>
                    </form>
                </div>
            </div>
            <div class="user singupBx">
                <div class="formBx">
                    <form action="">
                        <h2>注册</h2>
                        <input type="text" name="" placeholder="用户名">
                        <input type="email" name="" placeholder="邮箱地址">
                        <input type="password" name="" placeholder="密码">
                        <input type="password" name="" placeholder="再次输入密码">
                        <input type="submit" name="" value="注册">
                        <p class="signup">已有账号？<a href="#" onclick="topggleForm();">登录</a></p>
                    </form>
                </div>
                <div class="imgBx"><img src="../images/d2.jpg" alt=""></div>
            </div>
        </div>
        <div class="tool">
        <a href="./settlement.html" class="on tool-item1">购物车</a>
        <a href="./contact.html" class="tool-item2">联系<br>客服</a>
        <a href="./person.html" class="tool-item3">个人<br>资料</a>
        <a id="goTop" class="tool-item4" onclick="goTop()"><span class="top-arrow"></span>顶部</a>
        <a href="./service.html" class="tool-item5">反馈</a>
        <a href="../index.html" class="tool-item5">首页</a>
    </div>
    </section>
    <div class="popup" id="successPopup">
        <p>登录成功！</p>
    </div>
    <script type="text/javascript">
        function topggleForm(){
            var container = document.querySelector('.container');
            container.classList.toggle('active');
        }

        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            var username = document.querySelector('input[name="username"]').value;
            var password = document.querySelector('input[name="password"]').value;
            if (username === '小R2022131328' && password === '123456') {
                document.getElementById('successPopup').style.display = 'block';
                setTimeout(function(){
                    document.getElementById('successPopup').style.display = 'none';
                }, 1000); 
            }
        });
    </script>
</body>
</html>